<template>
    <div class="describe-com">
        <el-descriptions border column="4">
            <el-descriptions-item :label-class-name="`descriptions-label`" v-for="(v, i) in list" :key="i" :label="v.label">
                <span :class="`${form[v.prop]?.isRed && 'red-color'}`" v-if="v.prop != 'scope'">
                    <Tooltip :length="v.len || 15"
                        :content="`${(v.func ? v.func(form[v.prop]) : getVal(form[v.prop])) || ''}${v.unit || ''}`" />
                </span>
                <Tooltip :length="v.len || 15" v-else :content="`${getVal(form[v.prop]) || ''}`">
                    <template #text>
                        <div>
                            <p :style="`max-width: 80vw`" v-html="getVal(form[v.prop]) || ''"></p>
                        </div>
                    </template>
                    <template #value>
                        <div class="two-line" v-html="getVal(form[v.prop]) || ''">
                        </div>
                    </template>
                </Tooltip>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
const props = defineProps({
    list: { type: Array, default: [] },
    form: { type: Object, default: {} }
})


function getVal(val) {
    if (val && typeof val == 'object') {
        if (val.redValueList) {
            const words = val.redValueList || [];
            let text = val.value;
            words.forEach(word => {
                text = text.replaceAll(word, `<font color="red">${word}</font>`);
            });
            return text
        }
    }
    if (val == 0) {
        return '0'
    }
    if (val && typeof val == 'object') {
        return val.value == 0 ? '0' : val.value
    }
    return val
}

</script>

<style lang="scss">
.describe-com {
    font-size: 14px !important;

    .el-descriptions__label {
        width: 180px !important;
    }

    .el-descriptions__content {
        width: 240px !important;
    }
}

.red-color {
    color: red;
}
.two-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>